<template>
	<view class="reds-box">
		<view class="share-info-box">
			<view class="author-avatar">
				<image
					src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo310845e6nmi6g5nsubnbg90cf7knr3ig?imageView2/1/w/540/format/jpg"
					mode=""></image>
			</view>
			<view class="user-info-box">
				<view class="navbar-nickname">象数助念器</view>
				<view class="navbar-invite">
					点击即可助念~经典象数配方、名家辩证参考方、验方……
				</view>
			</view>
		</view>
		<view class="reds-box-button" v-if="!isWx" @click="openApp">
			打开看看
		</view>
		<!-- #ifdef WEB -->
		<wx-open-launch-app v-else id="launch-btn" :appid="'wxa3a4984ad59f475f'" :extinfo="extinfo" @launch="launch"
			@error="launchError">
			<component :is="'script'" type="text/wxtag-template">
				<view style="padding: 10rpx 20rpx;margin: 0 auto;font-size: 26rpx;
			font-weight: 500;
			color:#1F8258;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			background: #FFFFFF;
			border-radius: 8rpx;">
					打开看看
				</view>
			</component>
		</wx-open-launch-app>
		<!-- #endif -->
	</view>
</template>

<script name="share" setup lang="ts">
	import { onMounted, ref } from "vue";
	import { useCool, useWx } from "/@/cool";
	import { useUi } from "/$/cool-ui";
	import { isAndroid } from "/@/cool/utils"
	import { onHide } from "@dcloudio/uni-app";
	const { router } = useCool();
	const ui = useUi();
	const timer : Timeout = ref(0)
	const count = ref(0)
	const wx = useWx()
	const isWx = wx.isWxBrowser()
	const props = defineProps({
		href: String,
		title: String,
		summary: String,
		imageUrl: String,
		query: String
	});
	const extinfo= location.hash.slice(1)
	function openApp() {
		ui.showLoading('加载中...');
		const currentTime = +(new Date());
		window.location.href = "number://" + location.hash; //找ios工程师要 UrlSchemes
		//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
		timer.value = setInterval(function () {
			count.value++;
			const endTime = +(new Date()) - currentTime;
			if (count.value >= 100 || endTime > 3000) {
				ui.hideLoading()
				clearInterval(timer.value);
				let hidden = window.document.hidden || window.document.mozHidden || window.document
					.msHidden || window.document.webkitHidden;
				if (typeof hidden == "undefined" || hidden == false) {
					//App store下载地址
					router.push("/pages/index/download")
				}
			}
		}, 20);
	}
	function launch(res) {
		uni.setClipboardData({
			data: JSON.stringify(res),
			showToast:false,
			success: function () {
		
			}
		});
	}
	function launchError(err : any) {
		ui.showToast("应用未安装或当前场景不支持跳转")
		setTimeout(() => {
			router.push("/pages/index/download")
		}, 2300)
		uni.setClipboardData({
			data: JSON.stringify(err),
			showToast:false,
			success: function () {}
		});
	}
	onMounted(() => {
	})
</script>

<style lang="scss" scoped>
	.reds-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		color: #333;
		background: #0e0e11;
		box-sizing: border-box;
		position: sticky;
		top: 0rpx;
		z-index: 9999;

		.share-info-box {
			flex: 1;
			margin-right: 20rpx;
			box-sizing: border-box;
			display: flex;

			.author-avatar {
				width: 72rpx;
				height: 72rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.user-info-box {
				flex: 1;

				.navbar-nickname {
					color: #d5d7dd;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.navbar-invite {
					color: #6c717a;
					font-size: 24rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}

		.reds-box-button {
			padding: 10rpx 20rpx;
			margin: 0 auto;
			font-size: 26rpx;
			font-weight: 500;
			color: $cl-color-imagePlayer-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			background: #FFFFFF;
			border-radius: 8rpx;
		}

	}
</style>